<script setup>
	import {
		ref
	} from 'vue'
	import Mission from './components/mission.vue'
	import Picker from './components/picker.vue';
	import ChallengeList from './components/challenge-list.vue';
	import CarbonDisplayTraffic from './components/carbon-display-traffic.vue';
	import CarbonDisplayFood from './components/carbon-display-food.vue';
	import CarbonDisplayEnergy from './components/carbon-display-energy.vue';
	import HistoryDisplayYear from './components/history-display-year.vue';
	import HistoryDisplayMonth from './components/history-display-month.vue';
	import HistoryDisplayWeek from './components/history-display-week.vue';

	// 当前显示的组件
	const currentView = ref('default') // 'default' | 'traffic' | 'food' | 'energy' | 'year' | 'month' | 'week'

	// 处理碳源分析选择
	const handleCarbonSelect = (value) => {
		if (value === '碳源分析') {
			currentView.value = 'default' // 点击主标题返回默认
		} else {
			switch (value) {
				case '交通出行':
					currentView.value = 'traffic'
					break
				case '饮食消费':
					currentView.value = 'food'
					break
				case '能源使用':
					currentView.value = 'energy'
					break
			}
		}
	}

	// 处理历史对比选择
	const handleYearSelect = (value) => {
		if (value === '历史对比') {
			currentView.value = 'default' // 点击主标题返回默认
		} else {
			switch (value) {
				case '年':
					currentView.value = 'year'
					break
				case '月':
					currentView.value = 'month'
					break
				case '周':
					currentView.value = 'week'
					break
			}
		}
	}
</script>

<template>
	<view class="container">
		<Mission></Mission>
		<Picker @carbon-change="handleCarbonSelect" @year-change="handleYearSelect" />

		<!-- 默认视图 -->
		<ChallengeList v-if="currentView === 'default'" />

		<!-- 碳源分析 -->
		<CarbonDisplayTraffic v-if="currentView === 'traffic'" />
		<CarbonDisplayFood v-if="currentView === 'food'" />
		<CarbonDisplayEnergy v-if="currentView === 'energy'" />

		<!-- 历史对比 -->
		<HistoryDisplayYear v-if="currentView === 'year'" />
		<HistoryDisplayMonth v-if="currentView === 'month'" />
		<HistoryDisplayWeek v-if="currentView === 'week'" />
	</view>
</template>

<style scoped lang="scss">
	.container {
		height: 100vh;	
		background: linear-gradient(#E8F5E9, #fff);
	}
</style>